<template>
  <div class="container">
    <el-drawer
      custom-class="wxkj-drawer forward-drawer"
      :title="drawerTitle"
      :visible.sync="drawerShow"
      :destroy-on-close="true"
      size="500"
    >
      <div class="drawer-content">
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">


          <el-form-item v-show="false" label="id：" prop="id">
            <el-input v-model="form.id" />
          </el-form-item>
          <el-form-item label="角色名称：" prop="roleName">
            <el-input v-model="form.roleName" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="角色编码：" prop="roleCode">
            <el-input v-model="form.roleCode" :disabled="''!=form.id" placeholder="请输入(注意：编码不可修改)" />
          </el-form-item>
<!--          <el-form-item label="排序：" prop="sequence">-->
<!--            <el-input-->
<!--              v-model="form.sequence"-->
<!--              max-length="9"-->
<!--              placeholder="填写整数"-->
<!--              @input="formInput('sequence')"-->
<!--              @keyup.enter.native="handleFilter"-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item label="是否显示：" prop="disabled">-->
<!--            <el-radio-group v-model="form.disabled">-->
<!--              <el-radio :label="false">是</el-radio>-->
<!--              <el-radio :label="true">否</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item class="fr">
            <el-button @click.native="drawerShow = false">取消</el-button>
            <el-button type="primary" @click.native="submit('form')">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { sys_role_edit,sys_role_add } from '@/api/sys_role'
export default {
  components: {},
  props: {},
  data() {
    return {

      drawerTitle: '',
      drawerShow: false,

      form: {
        id: '',
        roleCode: '',
        roleName: ''
      },
      value: '',
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleCode: [
          { required: true, message: '请输入角色编码', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    drawerShow(bl) {
      console.log(""+bl)
      if (!bl){
        this.$refs.form.resetFields()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 输入整数
    formInput(e) {
      this.form[e] = this.form[e].replace(/[^\d]/g, '')
    },
    // 弹窗打开
    show(title,  rowData) {
     // this.topBlockId=topBlockId;
      this.drawerTitle = title
      this.drawerShow = true
     // console.log(rowData);
      if(null!=rowData){
        // 编辑传参
        try {
          if (rowData) {
            Object.keys(rowData).forEach(k => {
              this.form[k] = rowData[k]
              console.log(k,this.form[k]);
            })
          }
        } catch (e) {
          // TODO handle the exception
        }
      }else {//新增
        this.form.id="";
        this.form.roleCode="";
        this.form.roleName="";
      }



    },


    // 保存
    submit(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
          if(''==this.form.id){
            sys_role_add(this.form).then(response => {
              this.$message({
                type: 'success',
                message: this.form.id ? '保存成功!' : '添加成功！'
              })
              this.drawerShow = false
              this.$emit('refresh')
            })
          }else {
            sys_role_edit(this.form).then(response => {
              this.$message({
                type: 'success',
                message: this.form.id ? '保存成功!' : '添加成功！'
              })
              this.drawerShow = false
              this.$emit('refresh')
            })
          }//end of if-else




        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
